<template>
  <div class="card">
    <div style="color: dodgerblue;font-size:20px;font-weight:bold;text-align: center;margin-top: 20px;">基本信息</div>
    <div style="width: 80%;margin: 10px auto;">
      <el-form ref="form" :model="{form}" label-width="80px">
        <el-form-item label="报销事由" prop="expensesType">
          <el-select v-model="form.expensesType" placeholder="请选择报销事由">
            <el-option v-for="item in ExpensesData" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报销原因" prop="cause">
          <el-input type="textarea"  :rows="3" v-model="form.cause" placeholder="报销原因"></el-input>
        </el-form-item>

        <div style="color: dodgerblue;font-size:20px;font-weight:bold;text-align: center;margin-top: 20px;">报销明细</div>

        <div>
          <div>
            <el-button type="primary"  size="small"  @click="addRow">新增</el-button>
          </div>
          <!--设置的表单-->
          <el-form :model="{studentData}" ref="data" label-width="auto" style="margin-top: 20px;">
            <el-table border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" :data="studentData" ref="table" style="width: 100%">

              <el-table-column align="center"   label="花销类型">
                <template slot-scope="scope">
                  <!--表格里面嵌套表单-->
                  <el-form-item :prop="scope.$index + '.amountType'">
                    <el-select v-model="studentData[scope.$index].amountType" placeholder="请选择报销类型">
                      <el-option v-for="item in ExpensesData" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column align="center"  label="金额">
                <template slot-scope="scope">
                  <el-form-item :prop="scope.$index + '.amount'" >
                    <el-input v-model="studentData[scope.$index].amount" autocomplete="off" size="small" type='number' placeholder="金额"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column align="center"  label="备注">
                <template slot-scope="scope">
                  <el-form-item :prop="scope.$index + '.description'" >
                    <el-input
                        v-model="studentData[scope.$index].description"
                        autocomplete="off"
                        size="small"
                        placeholder="备注"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="handleDeleteRow(studentData[scope.$index])" type="text" size="small" >删除</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-form>
        </div>

        <el-form-item style="margin-top: 20px;">
          <el-button type="primary" @click="save">确认提交</el-button>
<!--          <el-button>取消</el-button>-->
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  name: "Expenses",
  data() {
    return {
      studentData: [],
      ExpensesData : [],//所有的报销类型
      tableData: [],  // 所有的数据
      form: {},
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      expensesId : this.$route.query.expensesId
    }
  },
  created() {
    this.getExpensesTypeData()
    //如果有审核单id就执行
    if (this.expensesId !== undefined) {
      this.getExpensesDataById()
    }
  },
  methods: {
    //当修改时候进行数据的回显
    getExpensesDataById(){
      this.$request.get('/expenses/getExpensesDataById/'+this.expensesId).then(res => {
        if (res.code === '200') {   // 表示操作成功
          this.form = res.data.expenses
          if (res.data.details !== null){
            this.studentData = res.data.details
          }
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }
      })
    },
    //获取所有的类型
    getExpensesTypeData(){
      this.$request.get('/getExpensesType').then(res => {
        if (res.code === '200') {   // 表示操作成功
          this.ExpensesData = res.data;
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }
      })
    },
    //进行保存
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      //创建一个传递给后端的接受参数
      let addDTO = {};
      addDTO.expenses = this.form;
      addDTO.details = this.studentData;
      if (this.studentData.length === 0){
        this.$message.error('请选择具体的报销详情')
        return
      }
      this.$request({
        url: this.form.id ? '/expenses/update' : '/expenses/add',
        method: this.form.id ? 'PUT' : 'POST',
        data: addDTO
      }).then(res => {
        if (res.code === '200') {  // 表示成功保存
          this.$message.success('保存成功')
          this.$router.push('/expensesPerson')  // 跳转到个人的报销单
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }
      })
    },

    /**
     * 新增行
     */
    addRow() {
      let index = this.studentData.length ;
      this.studentData.push({
        key: index,
        amountType:'',
        amount:'',
        description:'',
      });
    },

    /**
     * 删除行
     * @param row
     */
    handleDeleteRow(row){
      let datas = this.studentData;
      for (var i = 0; i < datas.length; i++){
        if (datas[i].key == row.key){
          datas.splice(i,1);
        }
      }
    },

    /**
     * 重置
     */
    // resetForm() {
    //   let datas = this.studentData;
    //   for (var i = 0; i < datas.length; i++){
    //     datas[i].name='';
    //     datas[i].age='';
    //     datas[i].sex='';
    //   }
    // },

  }
}
</script>

<style scoped>

</style>
